<template>
  <div class="bannerManageBox">
    <el-row class="top">
      <el-col :span="6" class="top-col">
        <el-input
          placeholder="请输入内容"
          v-model="params.field"
          clearable
          class="searchInput"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="12" class="top-col">
        <span class="radio-title">显示状态：</span>
        <el-radio-group v-model="params.bannerStatus" @change="screen">
          <el-radio label="">全部</el-radio>
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="0">下架</el-radio>
        </el-radio-group>
      </el-col>
      <!-- el-icon-s-check -->
      <el-col :span="6" class="top-col">
        <div class="sortAndBtn">
          <span class="sort-text" @click="saveSort"
            ><i class="el-icon-s-check"></i> 保存排序</span
          >
          <el-button type="primary" class="addBtn" @click="addBanner"
            >+新增banner</el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-row class="table">
      <el-table :data="bannerData" style="width: 100%">
        <el-table-column
          prop="bannerId"
          label="ID"
          width="80"
        ></el-table-column>
        <el-table-column prop="bannerName" label="Banner名称" width="180">
        </el-table-column>
        <el-table-column prop="bannerLocation" label="显示位置">
          <template slot-scope="{ row }">
            {{
              row.bannerLocation == 1
                ? "首页头部"
                : row.bannerLocation == 2
                ? "首页解决方案"
                : "集团新闻"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="bannerStatus" label="显示状态">
          <template slot-scope="{ row }">
            {{ row.bannerStatus ? "上架" : "下架" }}
          </template>
        </el-table-column>
        <el-table-column prop="bannerStartTime" label="显示时间">
          <template slot-scope="{ row }">
            {{ row.bannerStartTime | formatTime("yy-mm-dd") }}~{{
              row.bannerEndTime | formatTime("yy-mm-dd")
            }}
          </template>
        </el-table-column>
        <el-table-column prop="bannerSort" label="排序" width="80">
          <template slot-scope="{ row }">
            <el-input v-model="row.bannerSort" @change="changeSort(row)">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <div class="operation">
              <span @click="changeBanner(row, 'edit')">编辑</span> |
              <span @click="changeBanner(row, 'off')">{{
                row.bannerStatus ? "下架" : "上架"
              }}</span>
              |
              <span @click="changeBanner(row, 'del')">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagintaion-row">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.currentPage"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="params.size"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  mounted () {
    this.getData()
  },
  data () {
    return {
      //请求参数
      params: {
        field: '',
        currentPage: 1,
        size: 5,
        bannerStatus: ''
      },
      total: 3,
      //存放显示状态
      selectRadio: '',
      //banner内容列表
      bannerData: [
        {
          bannerId: 0,
          bannerName: '123',
          bannerLocation: '12',
          bannerStatus: 0,
          bannerTime: Date(),
          bannerSort: 11,
          bannerPicture: '',
          bannerLink: ''
        },
        {
          bannerId: 0,
          bannerName: '123',
          bannerLocation: '12',
          bannerStatus: 0,
          bannerTime: Date(),
          bannerSort: 11,
          bannerPicture: '',
          bannerLink: ''
        },
        {
          bannerId: 0,
          bannerName: '123',
          bannerLocation: '12',
          bannerStatus: 0,
          bannerTime: Date(),
          bannerSort: 11,
          bannerPicture: '',
          bannerLink: ''
        }
      ]
    }
  },
  methods: {
    ...mapMutations(['setBannerType', 'setBannerData']),
    //搜索
    search () {
      this.getData()
    },
    async changeSort (row) {
      const params = { bannerId: row.bannerId, bannerSort: row.bannerSort }
      const { meta: { msg, status }, parameters } = await this.$http.editBanner(params)
      if (status !== 200) return this.$message.error(`排序失败`)
      this.$message.success(`修改排序成功`)
      this.getData()
    },
    //操作
    async changeBanner (row, type) {
      if (type == 'edit') {
        //修改
        this.setBannerData(row)
        this.setBannerType('edit')
        this.$router.push({
          path: '/bannerManage/editBanner'
        })
      } else if (type == 'off') {
        //下架或上架
        const flag = await this.$confirm(`是否${row.bannerStatus ? '下架' : '上架'}该项内容？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => { })
        if (!flag) return this.$message(`取消${row.bannerStatus ? '下架' : '上架'}操作`);
        const params = { bannerId: row.bannerId, bannerStatus: row.bannerStatus ? 0 : 1 }
        // console.log(params)
        const { meta: { msg, status }, parameters } = await this.$http.editBanner(params)
        // console.log(res)
        if (status !== 200) return this.$message.error(`${row.bannerStatus ? '下架' : '上架'}失败`)
        this.$message.success(`${row.bannerStatus ? '下架' : '上架'}成功`)
        this.getData()
      } else {
        //删除
        const flag = await this.$confirm('是否删除该项内容？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => { })
        if (!flag) return this.$message('取消删除');
        const { meta: { status, msg } } = await this.$http.delBanner({ bannerId: row.bannerId })
        if (status != 200) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        this.getData()
      }
    },
    //保存排序
    async saveSort () {
      const flag = await this.$confirm('是否保存当前排序？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => { })
      if (!flag) return this.$message('取消保存排序操作');
    },
    //筛选
    screen (bannerStatus) {
      this.getData()
    },
    //添加banner
    addBanner () {
      this.setBannerType('add')
      this.$router.push({
        path: '/bannerManage/addBanner'
      })
    },
    //改变每页显示的条数
    handleSizeChange (pagesize) {
      this.params.size = pagesize
      this.getData()
    },
    //改变页码
    handleCurrentChange (pagenum) {
      this.params.currentPage = pagenum
      this.getData()
    },
    async getData () {
      const { data: { data }, meta: { msg, status }, parameters } = await this.$http.getBanner(this.params)
      // console.log(status)
      if (status != 200) return this.$message.error('获取数据失败')
      this.bannerData = data
      this.total = parameters.totalElement
    }
  }
}
</script>

<style scoped lang="less">
.bannerManageBox {
  width: 100%;
  height: 100%;
  min-width: 1200px;
  .top {
    height: 40px;
    .top-col {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .radio-title {
        margin-right: 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
        height: 100%;
      }
      .el-radio-group {
        height: 100%;
        display: flex;
        align-items: center;
        padding-top: 4px;
      }
      .searchInput {
        width: 80%;
      }
      .sortAndBtn {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        .sort-text {
          color: #108ee9;
          cursor: pointer;
        }
        .addBtn {
          margin-left: 10px;
        }
      }
    }
  }
  .table {
    margin: 10px;
    /deep/ .el-table {
      .el-table__cell {
        text-align: center;
        .cell {
          .operation {
            color: #d7d7d7;
            span {
              color: #1890ff;
              cursor: pointer;
            }
          }
        }
      }
      .el-table__header-wrapper {
        border-top: 1px solid rgba(235, 235, 235, 1);
      }
    }
  }
  .pagintaion-row {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
